<template>
  <div id="SecondsKill-list">
    <el-scrollbar ref="scrollbarRef" height="500px" always>
      <el-table :data="currentList" style="width: 100%">
        <el-table-column type="index" width="70" label="序号" fixed />
        <el-table-column fixed prop="banners" label="图片" width="150">
          <template #default="scope">
            <img :src="scope.row.img2" style="width: 100px; height: 70px" />
          </template>
        </el-table-column>
        <el-table-column fixed prop="proname" label="名称" width="150" />

        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column prop="brand" label="品牌" width="120" />
        <el-table-column prop="originprice" label="价格" width="120" />
        <el-table-column prop="sales" label="销量" width="120" />
        <el-table-column prop="stock" label="库存" width="120" />
        <el-table-column label="是否售卖" fixed="right" width="120">
          <template #default="scope">
            <el-switch v-model="scope.row.issale"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否推荐" fixed="right" width="120">
          <template #default="scope">
            <el-switch v-model="scope.row.isrecommend"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否秒杀" fixed="right" width="120">
          <template #default="scope">
            <el-switch v-model="scope.row.isseckill"></el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default>
            <el-button>修改</el-button>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-pagination
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      background
      layout="prev, pager, next"
      :total="proList.length"
    />
  </div>
</template>

<script  lang="ts" setup>
import { computed, reactive, ref, watchEffect, onMounted } from "vue";
import { getRecommendProListApi } from "@/api/pro";
import type {protype} from "@/mytype/index"
/* 定义产品列表的数据 */

/* 当前页的数据 */
let pageSize = ref(5);
// 2)、当前页码：
let currentPage = ref(1);
// let total = ref(0);

let proList = ref<Array<protype>>([]);

function getProList() {
  getRecommendProListApi().then((res: any) => {
    if (res.code === "200") {
      console.log("res.data", res.data);
      proList.value = res.data;
      console.log("proList", proList);
      // console.log("res", res);
      proList.value.forEach(item=>{
                  if(item.isseckill == 1){
                    item.isseckill = true;
                  } else {
                    item.isseckill = false;
                  }
                })
                proList.value.forEach(item=>{
                  if(item.isrecommend == 1){
                    item.isrecommend = true;
                  } else {
                    item.isrecommend = false;
                  }
                })
                proList.value.forEach(item=>{
                  if(item.issale == 1){
                    item.issale = true;
                  } else {
                    item.issale = false;
                  }
                })
    }
  });
}

onMounted(() => {
  getProList();
});

watchEffect(() => {
  // 当页码发生变化时，重新请求数据
  console.log("watchEffect.pageIndex.value", pageSize.value);
  getProList();
});

// 当前页的数据：使用计算属性，当页码发生变化，会重新获取当前页的数据
let currentList = computed(() => 
  proList.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )

);

</script>

<style scoped>
</style>